import AMapLoader from '@amap/amap-jsapi-loader';
import { PageContainer } from '@ant-design/pro-components';
import { useEffect } from 'react';

const Index: React.FC = () => {
  useEffect(() => {
    let map: any;
    AMapLoader.load({
      key: '8f961d3aa017ac1c4069ce032c92f4eb', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Driving'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 15, // 初始化地图级别
          center: [105.602725, 37.076636], // 初始化地图中心点位置
        });

        // 创建一个 Marker 实例：
        // const marker = new AMap.Marker({
        //   position: new AMap.LngLat(105.602725, 37.076636),
        //   title: '北京',
        // });

        // 将创建的点标记添加到已有的地图实例：
        // map.add(marker);

        // 创建一个从杭州到北京的路线规划：
        const driving = new AMap.Driving({
          policy: AMap.DrivingPolicy.LEAST_TIME,
          map: map,
        });

        // 根据起终点坐标规划驾车导航路线
        driving.search(
          new AMap.LngLat(120.1, 30.1),
          new AMap.LngLat(116.6, 39.9),
          function (status: any, result: any) {
            // 未出错时，result即是对应的路线规划方案
            console.log(status, result);
          },
        );
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map.destroy();
    };
  }, []);

  return (
    <PageContainer
      ghost
      header={{
        title: '高德地图',
      }}
    >
      <div id="container" className="map" style={{ height: '800px' }}></div>;
    </PageContainer>
  );
};

export default Index;
